<template>
<div class="privacy-settings-container">
    <div class="privacy-settings-header">
        <van-nav-bar title="隐私设置" left-arrow @click-left="$router.go(-1)" />
    </div>

    <div class="privacy-settings-content">
        <div class="privacy-tip">
            <van-icon name="info-o" />
            <span>隐私设置可以帮助您控制个人信息的可见范围</span>
        </div>

        <!-- 个人资料隐私 -->
        <div class="settings-section">
            <div class="section-title">个人资料隐私</div>
            <van-cell-group inset>
                <van-cell title="谁可以查看我的主页">
                    <template #right-icon>
                        <div @click="showPrivacySelector('profileVisibility')">
                            <span class="privacy-value">{{ privacyOptions[privacySettings.profileVisibility] }}</span>
                            <van-icon name="arrow" />
                        </div>
                    </template>
                </van-cell>

                <van-cell title="谁可以查看我的关注">
                    <template #right-icon>
                        <div @click="showPrivacySelector('followingVisibility')">
                            <span class="privacy-value">{{ privacyOptions[privacySettings.followingVisibility] }}</span>
                            <van-icon name="arrow" />
                        </div>
                    </template>
                </van-cell>

                <van-cell title="谁可以查看我的粉丝">
                    <template #right-icon>
                        <div @click="showPrivacySelector('followersVisibility')">
                            <span class="privacy-value">{{ privacyOptions[privacySettings.followersVisibility] }}</span>
                            <van-icon name="arrow" />
                        </div>
                    </template>
                </van-cell>

                <van-cell title="谁可以查看我的收藏">
                    <template #right-icon>
                        <div @click="showPrivacySelector('collectionsVisibility')">
                            <span class="privacy-value">{{ privacyOptions[privacySettings.collectionsVisibility]
                                }}</span>
                            <van-icon name="arrow" />
                        </div>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>

        <!-- 互动隐私 -->
        <div class="settings-section">
            <div class="section-title">互动隐私</div>
            <van-cell-group inset>
                <van-cell title="谁可以评论我的内容">
                    <template #right-icon>
                        <div @click="showPrivacySelector('commentPermission')">
                            <span class="privacy-value">{{ privacyOptions[privacySettings.commentPermission] }}</span>
                            <van-icon name="arrow" />
                        </div>
                    </template>
                </van-cell>

                <van-cell title="谁可以给我发消息">
                    <template #right-icon>
                        <div @click="showPrivacySelector('messagePermission')">
                            <span class="privacy-value">{{ privacyOptions[privacySettings.messagePermission] }}</span>
                            <van-icon name="arrow" />
                        </div>
                    </template>
                </van-cell>

                <van-cell title="允许被搜索到" center>
                    <template #right-icon>
                        <van-switch v-model="privacySettings.allowSearch" size="24"
                            @change="updatePrivacySetting('allowSearch')" />
                    </template>
                </van-cell>

                <van-cell title="允许推荐我的内容" center>
                    <template #right-icon>
                        <van-switch v-model="privacySettings.allowRecommend" size="24"
                            @change="updatePrivacySetting('allowRecommend')" />
                    </template>
                </van-cell>
            </van-cell-group>
        </div>

        <!-- 黑名单管理 -->
        <div class="settings-section">
            <div class="section-title">黑名单管理</div>
            <van-cell-group inset>
                <van-cell title="黑名单" is-link @click="goToBlacklist">
                    <template #right-icon>
                        <span class="blacklist-count">{{ blacklistCount }}人</span>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>

        <!-- 数据隐私 -->
        <div class="settings-section">
            <div class="section-title">数据隐私</div>
            <van-cell-group inset>
                <van-cell title="个性化推荐" center>
                    <template #right-icon>
                        <van-switch v-model="privacySettings.personalizedRecommend" size="24"
                            @change="updatePrivacySetting('personalizedRecommend')" />
                    </template>
                </van-cell>

                <van-cell title="浏览历史记录" center>
                    <template #right-icon>
                        <van-switch v-model="privacySettings.saveHistory" size="24"
                            @change="updatePrivacySetting('saveHistory')" />
                    </template>
                </van-cell>

                <van-cell title="位置信息" center>
                    <template #right-icon>
                        <van-switch v-model="privacySettings.locationSharing" size="24"
                            @change="updatePrivacySetting('locationSharing')" />
                    </template>
                </van-cell>

                <van-cell title="清除浏览历史" is-link @click="clearHistory" />
                <van-cell title="下载我的数据" is-link @click="downloadData" />
            </van-cell-group>
        </div>
    </div>

    <!-- 隐私选择器弹窗 -->
    <van-action-sheet v-model="showPrivacyActionSheet" :title="actionSheetTitle" :actions="privacyActions"
        @select="onPrivacyActionSelect" @cancel="showPrivacyActionSheet = false" cancel-text="取消" />
</div>
</template>

<script>
export default {
    name: 'PrivacySettingsPage',
    data() {
        return {
            privacySettings: {
                profileVisibility: 0, // 0-所有人，1-关注的人，2-仅自己
                followingVisibility: 0,
                followersVisibility: 0,
                collectionsVisibility: 1,
                commentPermission: 0,
                messagePermission: 1,
                allowSearch: true,
                allowRecommend: true,
                personalizedRecommend: true,
                saveHistory: true,
                locationSharing: false
            },
            privacyOptions: ['所有人', '关注的人', '仅自己'],
            blacklistCount: 3,
            showPrivacyActionSheet: false,
            actionSheetTitle: '',
            currentSettingKey: '',
            privacyActions: []
        }
    },
    methods: {
        showPrivacySelector(settingKey) {
            this.currentSettingKey = settingKey

            // 设置标题
            const titleMap = {
                profileVisibility: '谁可以查看我的主页',
                followingVisibility: '谁可以查看我的关注',
                followersVisibility: '谁可以查看我的粉丝',
                collectionsVisibility: '谁可以查看我的收藏',
                commentPermission: '谁可以评论我的内容',
                messagePermission: '谁可以给我发消息'
            }

            this.actionSheetTitle = titleMap[settingKey]

            // 设置选项
            this.privacyActions = this.privacyOptions.map((text, index) => ({
                name: text,
                value: index,
                className: this.privacySettings[settingKey] === index ? 'active-option' : ''
            }))

            this.showPrivacyActionSheet = true
        },

        onPrivacyActionSelect(action) {
            this.privacySettings[this.currentSettingKey] = action.value
            this.showPrivacyActionSheet = false
            this.$toast(`已设置为"${action.name}"`)

            // 保存设置
            this.savePrivacySettings()
        },

        updatePrivacySetting(key) {
            // 更新开关类型的隐私设置
            const valueText = this.privacySettings[key] ? '开启' : '关闭'
            this.$toast(`已${valueText}`)

            // 保存设置
            this.savePrivacySettings()
        },

        savePrivacySettings() {
            // 保存隐私设置到本地存储
            localStorage.setItem('privacySettings', JSON.stringify(this.privacySettings))
        },

        goToBlacklist() {
            this.$router.push('/blacklist')
        },

        clearHistory() {
            this.$dialog.confirm({
                title: '清除浏览历史',
                message: '确定要清除所有浏览历史记录吗？此操作无法撤销。',
            }).then(() => {
                this.$toast.loading({
                    message: '正在清除...',
                    forbidClick: true,
                    duration: 1500
                })

                setTimeout(() => {
                    this.$toast.success('浏览历史已清除')
                }, 1500)
            })
        },

        downloadData() {
            this.$dialog.confirm({
                title: '下载我的数据',
                message: '您的数据将以压缩包形式导出，可能需要一些时间准备。继续吗？',
            }).then(() => {
                this.$toast.loading({
                    message: '正在准备数据...',
                    forbidClick: true
                })

                setTimeout(() => {
                    this.$toast.clear()
                    this.$dialog.alert({
                        title: '数据准备完成',
                        message: '您的数据已准备完成，我们将在24小时内发送下载链接到您的邮箱。',
                    })
                }, 2000)
            })
        }
    },
    created() {
        // 从本地存储加载隐私设置
        const savedSettings = localStorage.getItem('privacySettings')
        if (savedSettings) {
            this.privacySettings = JSON.parse(savedSettings)
        }
    }
}
</script>

<style scoped>
.privacy-settings-container {
    min-height: 100vh;
    background-color: #f7f8fa;
}

.privacy-settings-content {
    padding: 16px;
}

.privacy-tip {
    display: flex;
    align-items: center;
    background-color: #f0f9ff;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    color: #1989fa;
}

.privacy-tip .van-icon {
    margin-right: 8px;
    flex-shrink: 0;
}

.settings-section {
    margin-bottom: 20px;
}

.section-title {
    margin-left: 16px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #969799;
}

.privacy-value {
    margin-right: 5px;
    font-size: 14px;
    color: #969799;
}

.blacklist-count {
    font-size: 14px;
    color: #969799;
}

:deep(.active-option) {
    color: #1989fa;
}
</style>